<template>
  <div class="app-container">
    <div class="receivableSheet">
      <el-form ref="form"  label-width="130px" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="类型">
              <el-select v-model="params.code" placeholder="请选择">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="对账单" :value="1000011"></el-option>
                <el-option label="补贴单" :value="1000013"></el-option>
                <el-option label="预约单" :value="1000012"></el-option>
                <el-option label="流水单" :value="1000014"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--  <el-col :span="6">
            <el-form-item label="平台">
              <el-select v-model="params.platType" placeholder="请选择">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="总后台" :value="1"></el-option>
                <el-option label="医院" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="params.status" placeholder="请选择">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="执行中" value="0"></el-option>
                <el-option label="导出完成" value="1"></el-option>
                <el-option label="导出失败" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间" width="236">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="dates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv" style="margin-top:10px;">
      <el-table :data="tableData" border style="width: 100%" ref="tableData">
        <el-table-column fixed type="index" label="序号" width="50"></el-table-column>

        <el-table-column prop="exportType" label="导出类型"></el-table-column>
        <el-table-column prop="platType" label="平台"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="createdBy" label="创建人"></el-table-column>

        <el-table-column prop="createdAt" label="创建时间"></el-table-column>

        <el-table-column prop="ossUrl" label="操作">
          <template slot-scope="scope">
            <a
              :href="scope.row.ossUrl"
              target="_blank"
              rel="noopener noreferrer"
              download="filename"
              v-if="scope.row.ossUrl.indexOf('http') > -1"
            >下载</a>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      :current-page="params.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import HospitalStatement from "@/api/HospitalStatement";
import reconciliationExport from "@/api/reconciliationExport";
export default {
  data() {
    return {
      dates: null,
      total: 0,
      tableData: [],
      hospitalList: [],
      params: {
        pageNum: 1,
        pageSize: 20,
        platType: 1,
        createdBy: this.$store.state.user.name
      }
    };
  },
  watch: {
    dates(val) {
      this.params.createdAtBegin = this.dates ? this.dates[0] : "";
      this.params.createdAtEnd = this.dates ? this.dates[1] : "";
    }
  },
  mounted() {
    this.list();
    // this.hospitalSelect();
  },
  methods: {
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    },
    handleSearch() {
      //搜索
      this.list();
    },
    async list() {
      let res = await reconciliationExport.list(this.params);
      console.log(res);
      if (res.data.code == 0) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
      } else {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    //医院名称下拉列表
    hospitalSelect() {
      HospitalStatement.hospitalSelect()
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            let resData = res.data.data;
            let newArr = [];
            resData.forEach(e => {
              // console.log(e)
              newArr.push({
                name: e.name,
                value: String(e.id)
              });
            });
            newArr.unshift({
              name: "全部",
              value: null
            });
            // console.log(newArr);
            this.hospitalList = newArr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    }
  }
};
</script>
<style scoped>
a {
  color: blue;
}
</style>
